@import "../../styles/variables";
@import "../../styles/mixins";

.form-item {
  &-desc {
    margin-top: 4px;
    @include TypographyParagraph;
    color: $form-item-desc-color;

    a {
      color: $primary;
    }
  }

  &-control {
    position: relative;
  }

  &-label {
    display: block;
    margin-bottom: 4px;
    @include TypographyParagraph;
    color: $form-item-label-color;
  }

  &-error {
    margin-top: 4px;
    @include TypographyParagraph;
    color: $form-item-error-color;
  }

  &-required {
    margin: 0 6px;
    @include TypographyParagraph;
    color: $form-item-required-color;
  }

  .input,
  .textarea,
  .select {
    width: 100%;
    max-width: 455px;
  }

  &.error-item {
    .input,
    .textarea,
    .select-control {
      border: solid 1px $input-error-color !important;
      &:focus,
      &:hover {
        border: solid 1px $input-error-color !important;
        box-shadow: 0 4px 8px 0 rgba(202, 38, 33, 0.2) !important;
      }
    }
  }

  & + .form-item,
  & + .form-group {
    margin-top: 12px;
  }
}

.form-group {
  margin-bottom: 12px;
  padding: 11px 16px;
  border-radius: $border-radius;
  border: solid 1px $border-color;

  &-title {
    font-weight: $font-bold;
    color: $form-item-label-color;

    label.checkbox span.label-value {
      font-weight: $font-bold;
      padding-left: 11px;
      color: $form-item-label-color;
    }

    &-toggle {
      cursor: pointer;

      .icon {
        margin-right: 8px;
      }
    }
  }

  &-desc {
    @include TypographyParagraph($form-item-desc-color);
  }

  &-content {
    padding: $base-margin;
    margin: 0 -8px;
    margin-top: $base-margin;
    border-radius: $border-radius;
    background-color: $form-group-content-bg;
  }

  &-hide {
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }

  &-checkable {
    .form-group-desc {
      padding-left: 23px;
    }
  }
}
